<template>
	<view>
		<view class="fixed">
			<cu-custom :isBack="true" bgColor="text-white bg-shadeTop">
				<block slot="backText">返回</block>
				<block slot="content">标化巡查</block>
			</cu-custom>
		</view>
		<view class="container">
			<view class="header">
				<image src="../../static/patrol/patrol_main_header2.jpg" mode="widthFix" style="max-height: 250px;" class="response"></image>
			</view>

			<view class="body">
				<!-- 两个图标菜单 -->
				<view class="menu">
					<view class="cu-list grid col-2 no-border">
						<view class="cu-item" @tap="clickDangerManager">
							<view class="cuIcon-warn">
							</view>
							<text>隐患管理</text>
						</view>
						<view class="cu-item" @tap="clickHistory">
							<view class="cuIcon-time">
							</view>
							<text>巡查历史</text>
						</view>
					</view>
				</view>

				<!-- tab -->
				<view class="tabs flex nav">
					<view v-for="(item,index) in tabs" :key="index" :class="index==TabCur?'text-blue cur':''" class="tab flex-sub text-center cu-item"
					 @tap="clickTab" :data-index="index">
						{{item}}
					</view>
				</view>
				<!-- 移动巡检 -->
				<view class="patrol_container" v-if="TabCur == 0">
					<view class="mobile_container" v-if="mobile.length != 0">
						<view>
							<view class="mobile_item bg-white shadow radius" v-for="(item,index) in mobile" :key="index" @tap="clickMobileItem"
							 :data-index="index">
								<view class="text-gray">
									{{item.projectId}}
								</view>
								<view class="text-blue" style="font-size: 18px;margin-top: 5px;">
									{{item.projectName}}
								</view>
							</view>
						</view>
					</view>
					<empty content="暂无巡查内容" v-if="mobile.length == 0"></empty>
				</view>
				<!-- 设备巡检 -->
				<view class="patrol_container device" v-if="TabCur == 1">
					<image src="../../static/patrol/patrol_qrcode_reader.png" mode="widthFix"></image>
					<button type="primary" class="cu-btn lg bg-blue round" @tap="clickScan">扫一扫</button>
				</view>
			</view>
		</view>

		<!-- 模态框 -->
		<view class="cu-modal" :class="model.show?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{model.type == 0?'移动巡检':'设备巡检'}}</view>
					<view class="action" @tap="model.show = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white">
					<view class="model_image">
						<image src="../../static/patrol/patrol_dialog_progress_image.png" mode="widthFix"></image>
						<view class="model_image_content">
							<view class="text-gray" style="font-size: 18px;">
								标准化巡查
							</view>
							<view class="" style="margin-top: 10px;font-size: 18px;">
								检查指标<span class="text-red" style="font-size: 21px;">{{model.count}}</span>项
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white padding">
					<!-- <view class="action">
						<button class="cu-btn line-green text-green">取消</button>
						<button class="cu-btn bg-green margin-left">确定</button>
					</view> -->
					<button class="cu-btn bg-blue lg" style="width: 100%;" @tap="clickModelStart">开始</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import empty from '../../components/empty/empty.vue'

	import api from '../../util/apis/api-patrol.js'
	import ui from '../../util/ui.js'

	import {
		mapGetters
	} from 'vuex'




	let that = null;
	export default {
		components: {
			empty
		},
		data() {
			return {
				TabCur: 0,
				tabs: ['移动巡检', '设备巡检'],
				mobile: [],
				model: {
					type: 0,
					show: false,
					count: 0,
					data: {}
				}
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad() {
			that = this;
			this.getMobileList()
		},
		onShow() {
		},
		methods: {
			// ———————————————————————点击事件—————————————————————————
			/**
			 * 点击隐患管理事件
			 */
			clickDangerManager:function(){
				uni.navigateTo({
					url:'./patrol_danger_list'
				})
			},
			/**
			 * 点击巡查历史
			 */
			clickHistory:function(){
				uni.navigateTo({
					url:'./patrol_history'
				})
			},
			/**
			 * 点击tab事件
			 * @param {Object} e
			 */
			clickTab: function(e) {
				let index = e.currentTarget.dataset.index;
				this.TabCur = index;
			},
			/**
			 * 点击移动巡检item
			 * @param {Object} e
			 */
			clickMobileItem: function(e) {
				this.model.show = !this.model.show
				let index = e.currentTarget.dataset.index;
				let project = this.mobile[index];
				ui.showLoading()
				api.getPatrolMobileInfo(project.id, '41')
					.then(res => {
						that.model.show = true;
						that.model.type = 0;
						that.model.count = res.items.length;
						that.model.data = res;
					})
					.finally(() => {
						ui.hideLoading()
					})
			},
			/**
			 * 点击扫一扫
			 * @param {Object} e
			 */
			clickScan: function(e) {
				// 测试
				// ui.showLoading()
				// api.getPatrolDeviceInfo('fb5e011c9c1f4d0bbc2745233e944769', "41")
				// 	.then(res => {
				// 		that.model.show = true;
				// 		that.model.type = 1;
				// 		that.model.count = res.patrolFacilityCheckItemsVos.length;
				// 		that.model.data = res;
				// 	})
				// 	.finally(() => {
				// 		ui.hideLoading()
				// 	})
				
				uni.scanCode({
					onlyFromCamera: true,
					success(res) {
						let code = res.result;
						ui.showLoading()
						api.getPatrolDeviceInfo(code, "41")
							.then(res => {
								that.model.show = true;
								that.model.type = 1;
								that.model.count = res.patrolFacilityCheckItemsVos.length;
								that.model.data = res;
							})
							.finally(() => {
								ui.hideLoading()
							})
					}
				})
			},

			/**
			 * 点击dialog的开始巡检按钮
			 * @param {Object} e
			 */
			clickModelStart: function(e) {
				let type = that.model.type;
				let data = that.model.data;
				data = encodeURIComponent(JSON.stringify(data));
				switch (type) {
					case 0:
						// 说明是移动巡检
						uni.navigateTo({
							url: './patrol_mobile?mobile=' + data
						})
						break;
					case 1:
						// 说明是设备巡检
						uni.navigateTo({
							url: './patrol_device?device=' + data
						})
						break;
				}
				that.model.show = false;
			},

			// ———————————————————————api数据—————————————————————————
			/**
			 * 获取移动巡检列表
			 */
			getMobileList: function() {
				ui.showLoading()
				api.getPatrolMobileList('xjssjk')
					.then((res) => {
						if (res) {
							this.mobile = res;
						}
					})
					.finally(() => {
						ui.hideLoading()
					})
			}
		}

	}
</script>

<style>
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
	}


	.body {
		height: 0;
		flex-grow: 1;
		background-color: white;
		position: relative;
		margin-top: -80px;
		border-radius: 10px;
		overflow: hidden;
		padding: 0 16px;
		display: flex;
		flex-direction: column;
	}

	.patrol_container {
		height: 0px;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}

	.patrol_container .mobile_container {
		height: 0;
		flex-grow: 1;
		overflow: auto;
	}

	.mobile_item {
		padding: 10px;
		margin: 10px 5px;
		background-color: white;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}



	.device {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.device image {
		width: 160px;
	}

	.device button {
		margin-top: 10px;
	}


	.model_image {
		position: relative;
	}

	.model_image_content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
</style>
